<template>
    <div class="konva-demo">
        <EssayEvaluator
            ref="essayEvaluator"
            :config="config"
            :mark-data="markData"
            @markClick="onMarkClick"
        />
        <!-- <el-image
            class="search-plus"
            :src="searchPlusIcon"
            @click="showImage"
        ></el-image> -->
        <!-- <el-button type="primary" @click="showImage">显示图片</el-button> -->
        <div style="margin-bottom: 15px">
            <el-tabs v-model="viewType" @tab-click="handleClick">
                <el-tab-pane label="综合点评" name="comprehensive"
                    >综合点评</el-tab-pane
                >
                <el-tab-pane label="字词句点评" name="wordsentence"
                    >字词句点评</el-tab-pane
                >
                <el-tab-pane label="段落点评" name="paragraph"
                    >段落点评</el-tab-pane
                >
                <!-- <el-tab-pane label="智能纠错" name="correction"
                    >智能纠错</el-tab-pane
                > -->
                <el-tab-pane label="全文润色" name="runse"
                    >全文润色</el-tab-pane
                >
            </el-tabs>
        </div>
        <KonvaDemoChild />
        <!-- <div class="image-box">
            <el-image
                ref="elImage"
                style="width: 100px; height: 100px"
                :src="dataURL"
                :preview-src-list="[dataURL]"
                @load="onImageLoad"
            >
            </el-image>
        </div> -->
    </div>
</template>
<script>
import Vue from "vue";
import EssayEvaluator from "./EssayEvaluator/index.vue";
import searchPlusIcon from "../assets/paperTrace/search-plus.png";
import KonvaDemoChild from "./KonvaDemoChild.vue";

export default {
    data() {
        return {
            viewType: "comprehensive",
            config: {
                stageWidth: 780,
                stageHeight: 550,
                viewType: "comprehensive",
                score: 38,
                subject: "chinese",
                flunked: false,
            },
            markData: [
                {
                    url: "http://36.111.151.166:19019/tongzi2/ThYR1Pm7V3cWUENJh9iDSCmJY7tmTfnF.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20250414%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250414T004317Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a04b16bacce7ed61c13d3cb77130a24ae981158def2e5fe056a02ab4fa91e173",
                    id: 10650,
                    content:
                        "　　陪伴\n　　每个人在成长的道路上都会有陪伴，陪着你的，有可能是一个人，有可能是一件物品而陪伴我走到今天的却是一个挂坠\n　　这个娃坠十分普通，透明的亚克力板上印着一个球衣一样的花纹，球衣正中写着24这个两位数，然而就是这个十分平常的挂坠却是我的心爱之物\n　　这个挂坠是我的好朋友送给我的，他的成绩很好都总被老师骂,他们很有钱,他父母也是外地人，因工作娘因来到了这里，于是他就被带到我们班读书,我们认识不久就成为了好朋友，由于家离得近所以我们也一起上下学,一起当作业，就这样不知不觉来到了",
                    selections: {
                        words: [],
                        sentences: [],
                        paragraphs: [],
                        corrections: [],
                    },
                },
                {
                    url: "http://36.111.151.166:19019/tongzi2/AB1MtDS6thVVthNX2I33ZAnf77ictdIp.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20250414%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250414T004317Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=8f9adcffd7bf4dfb2ebc3266f24093dbfd3034b0fcc0d2197ba0ec11919a2cc7",
                    id: 10649,
                    content:
                        "五年级，有一天他突然很不开心,我一问他原因才得知他父A0T我要把他带到处面的学校读书去了，我很不舍得他，可是时间却过得很快一眨眼就到了期来,在考完试回家的路上,我们两都低头不说话快到家时，他突然从包里拿貌出一个印着球衣的挂坠，说：“这个2.4号球衣是一位球蓝明星的，他是通过不断的努力获得了很多荣誉…你也加油…以后我们可以考连同一个学校，就又可以在一起了”\n　　这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时，便会想起他说的话，使又ASOO有了力气\n　　十个坠挂,一段话,陪伴我走到了今天",
                    selections: {
                        words: [],
                        sentences: [],
                        paragraphs: [],
                        corrections: [],
                    },
                },
                {
                    url: "http://36.111.151.166:19019/tongzi2/AB1MtDS6thVVthNX2I33ZAnf77ictdIp.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20250414%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250414T004317Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=8f9adcffd7bf4dfb2ebc3266f24093dbfd3034b0fcc0d2197ba0ec11919a2cc7",
                    id: 10648,
                    content:
                        "五年级，有一天他突然很不开心,我一问他原因才得知他父A0T我要把他带到处面的学校读书去了，我很不舍得他，可是时间却过得很快一眨眼就到了期来,在考完试回家的路上,我们两都低头不说话快到家时，他突然从包里拿貌出一个印着球衣的挂坠，说：“这个2.4号球衣是一位球蓝明星的，他是通过不断的努力获得了很多荣誉…你也加油…以后我们可以考连同一个学校，就又可以在一起了”\n　　这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时，便会想起他说的话，使又ASOO有了力气\n　　十个坠挂,一段话,陪伴我走到了今天",
                    selections: {
                        words: [],
                        sentences: [],
                        paragraphs: [],
                        corrections: [],
                    },
                },
            ],
            words: [
                {
                    index: 1,
                    text: "不知不觉",
                    cooridates: [
                        {
                            x1: 162.748643761302,
                            y1: 686.9349005424955,
                            x2: 271.24773960217,
                            y2: 721.5189873417721,
                            x: 162.748643761302,
                            y: 686.9349005424955,
                            width: 108.499095840868,
                            height: 34.58408679927663,
                        },
                    ],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 1,
                    text: "不知不觉",
                    cooridates: [],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: true,
                },
            ],
            sentences: [
                {
                    index: 1,
                    text: "这个挂坠是我的好朋友送给我的",
                    cooridates: [
                        {
                            x1: 61.70886075949367,
                            y1: 410.9403254972875,
                            x2: 363.47197106690777,
                            y2: 449.59312839059675,
                            x: 61.70886075949367,
                            y: 410.9403254972875,
                            width: 301.7631103074141,
                            height: 38.65280289330923,
                        },
                        {
                            x1: 4.068716094032549,
                            y1: 445.52441229656415,
                            x2: 84.76491862567812,
                            y2: 482.1428571428571,
                            x: 4.068716094032549,
                            y: 445.52441229656415,
                            width: 80.69620253164557,
                            height: 36.61844484629296,
                        },
                    ],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 2,
                    text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时,便会想起他说的话,使又ASOO有了力气",
                    cooridates: [],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: true,
                },
                {
                    index: 3,
                    text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时",
                    cooridates: [],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: true,
                },
                {
                    index: 1,
                    text: "这个挂坠是我的好朋友送给我的",
                    cooridates: [],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: true,
                },
                {
                    index: 2,
                    text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时,便会想起他说的话,使又ASOO有了力气",
                    cooridates: [
                        {
                            x1: 63.60424028268552,
                            y1: 456.49293286219086,
                            x2: 355.7862190812721,
                            y2: 496.2455830388693,
                            x: 63.60424028268552,
                            y: 1184.7931136940174,
                            width: 292.1819787985866,
                            height: 39.75265017667846,
                        },
                        {
                            x1: 14.575971731448764,
                            y1: 491.60777385159014,
                            x2: 353.7985865724382,
                            y2: 528.047703180212,
                            x: 14.575971731448764,
                            y: 1219.9079546834166,
                            width: 339.2226148409894,
                            height: 36.43992932862187,
                        },
                        {
                            x1: 8.613074204946997,
                            y1: 524.0724381625442,
                            x2: 356.4487632508834,
                            y2: 563.1625441696114,
                            x: 8.613074204946997,
                            y: 1252.3726189943707,
                            width: 347.8356890459364,
                            height: 39.09010600706711,
                        },
                        {
                            x1: 7.95053003533569,
                            y1: 555.8745583038869,
                            x2: 277.60600706713785,
                            y2: 596.952296819788,
                            x: 7.95053003533569,
                            y: 1284.1747391357135,
                            width: 269.65547703180215,
                            height: 41.077738515901046,
                        },
                    ],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 3,
                    text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时",
                    cooridates: [
                        {
                            x1: 63.60424028268552,
                            y1: 456.49293286219086,
                            x2: 355.7862190812721,
                            y2: 496.2455830388693,
                            x: 63.60424028268552,
                            y: 1184.7931136940174,
                            width: 292.1819787985866,
                            height: 39.75265017667846,
                        },
                        {
                            x1: 14.575971731448764,
                            y1: 491.60777385159014,
                            x2: 353.7985865724382,
                            y2: 528.047703180212,
                            x: 14.575971731448764,
                            y: 1219.9079546834166,
                            width: 339.2226148409894,
                            height: 36.43992932862187,
                        },
                        {
                            x1: 8.613074204946997,
                            y1: 524.0724381625442,
                            x2: 193.4628975265018,
                            y2: 561.8374558303888,
                            x: 8.613074204946997,
                            y: 1252.3726189943707,
                            width: 184.8498233215548,
                            height: 37.76501766784452,
                        },
                    ],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: false,
                },
            ],
            paragraphs: [
                {
                    index: 1,
                    text: "每个人在成长的道路上都会有陪伴，陪着你的，有可能是一个人，有可能是一件物品而陪伴我走到今天的却是一个挂坠",
                    cooridates: [
                        {
                            x1: 65.77757685352621,
                            y1: 40.6871609403255,
                            x2: 366.1844484629295,
                            y2: 82.73056057866184,
                            x: 65.77757685352621,
                            y: 40.6871609403255,
                            width: 300.40687160940325,
                            height: 42.04339963833634,
                        },
                        {
                            x1: 12.206148282097649,
                            y1: 75.27124773960216,
                            x2: 361.4376130198915,
                            y2: 114.60216998191682,
                            x: 12.206148282097649,
                            y: 75.27124773960216,
                            width: 349.23146473779383,
                            height: 39.33092224231466,
                        },
                        {
                            x1: 10.849909584086799,
                            y1: 110.53345388788426,
                            x2: 362.7938517179023,
                            y2: 147.83001808318264,
                            x: 10.849909584086799,
                            y: 110.53345388788426,
                            width: 351.94394213381554,
                            height: 37.29656419529837,
                        },
                        {
                            x1: 10.849909584086799,
                            y1: 145.11754068716093,
                            x2: 358.7251356238698,
                            y2: 180.37974683544303,
                            x: 10.849909584086799,
                            y: 145.11754068716093,
                            width: 347.875226039783,
                            height: 35.262206148282104,
                        },
                        {
                            x1: 6.1030741410488245,
                            y1: 179.02350813743217,
                            x2: 56.283905967450266,
                            y2: 211.57323688969257,
                            x: 6.1030741410488245,
                            y: 179.02350813743217,
                            width: 50.180831826401445,
                            height: 32.54972875226039,
                        },
                    ],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 2,
                    text: "这个娃坠十分普通，透明的亚克力板上印着一个球衣一样的花纹，球衣正中写着24这个两位数，然而就是这个十分平常的挂坠却是我的心爱之物",
                    cooridates: [
                        {
                            x1: 63.743218806509944,
                            y1: 209.5388788426763,
                            x2: 361.4376130198915,
                            y2: 248.19168173598553,
                            x: 63.743218806509944,
                            y: 209.5388788426763,
                            width: 297.69439421338154,
                            height: 38.65280289330923,
                        },
                        {
                            x1: 8.815551537070524,
                            y1: 244.12296564195296,
                            x2: 356.0126582278481,
                            y2: 284.13200723327304,
                            x: 8.815551537070524,
                            y: 244.12296564195296,
                            width: 347.19710669077756,
                            height: 40.009041591320084,
                        },
                        {
                            x1: 6.78119349005425,
                            y1: 279.38517179023506,
                            x2: 355.33453887884264,
                            y2: 315.3254972875226,
                            x: 6.78119349005425,
                            y: 279.38517179023506,
                            width: 348.5533453887884,
                            height: 35.94032549728752,
                        },
                        {
                            x1: 10.849909584086799,
                            y1: 311.9349005424955,
                            x2: 353.9783001808318,
                            y2: 349.90958408679927,
                            x: 10.849909584086799,
                            y: 311.9349005424955,
                            width: 343.128390596745,
                            height: 37.97468354430379,
                        },
                        {
                            x1: 8.137432188065098,
                            y1: 345.84086799276673,
                            x2: 354.65641952983725,
                            y2: 385.17179023508135,
                            x: 8.137432188065098,
                            y: 345.84086799276673,
                            width: 346.5189873417722,
                            height: 39.330922242314614,
                        },
                        {
                            x1: 4.746835443037974,
                            y1: 382.45931283905963,
                            x2: 25.768535262206147,
                            y2: 414.3309222423146,
                            x: 4.746835443037974,
                            y: 382.45931283905963,
                            width: 21.021699819168173,
                            height: 31.87160940325498,
                        },
                    ],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 3,
                    text: "这个挂坠是我的好朋友送给我的，他的成绩很好都总被老师骂,他们很有钱,他父母也是外地人，因工作娘因来到了这里，于是他就被带到我们班读书,我们认识不久就成为了好朋友，由于家离得近所以我们也一起上下学,一起当作业，就这样不知不觉来到了五年级，有一天他突然很不开心,我一问他原因才得知他父A0T我要把他带到处面的学校读书去了，我很不舍得他，可是时间却过得很快一眨眼就到了期来,在考完试回家的路上,我们两都低头不说话快到家时，他突然从包里拿貌出一个印着球衣的挂坠，说：“这个2.4号球衣是一位球蓝明星的，他是通过不断的努力获得了很多荣誉…你也加油…以后我们可以考连同一个学校，就又可以在一起了”",
                    cooridates: [
                        {
                            x1: 61.70886075949367,
                            y1: 410.9403254972875,
                            x2: 363.47197106690777,
                            y2: 449.59312839059675,
                            x: 61.70886075949367,
                            y: 410.9403254972875,
                            width: 301.7631103074141,
                            height: 38.65280289330923,
                        },
                        {
                            x1: 4.068716094032549,
                            y1: 445.52441229656415,
                            x2: 362.7938517179023,
                            y2: 484.8553345388788,
                            x: 4.068716094032549,
                            y: 445.52441229656415,
                            width: 358.7251356238698,
                            height: 39.33092224231467,
                        },
                        {
                            x1: 5.424954792043399,
                            y1: 478.75226039783,
                            x2: 357.3688969258589,
                            y2: 517.4050632911392,
                            x: 5.424954792043399,
                            y: 478.75226039783,
                            width: 351.9439421338155,
                            height: 38.65280289330917,
                        },
                        {
                            x1: 2.0343580470162745,
                            y1: 511.3019891500904,
                            x2: 356.6907775768535,
                            y2: 551.9891500904159,
                            x: 2.0343580470162745,
                            y: 511.3019891500904,
                            width: 354.65641952983725,
                            height: 40.687160940325555,
                        },
                        {
                            x1: 2.0343580470162745,
                            y1: 545.2079566003616,
                            x2: 353.30018083182637,
                            y2: 586.5732368896926,
                            x: 2.0343580470162745,
                            y: 545.2079566003616,
                            width: 351.2658227848101,
                            height: 41.36528028933094,
                        },
                        {
                            x1: 0,
                            y1: 581.1482820976491,
                            x2: 356.0126582278481,
                            y2: 619.122965641953,
                            x: 0,
                            y: 581.1482820976491,
                            width: 356.0126582278481,
                            height: 37.97468354430384,
                        },
                        {
                            x1: 4.068716094032549,
                            y1: 615.7323688969258,
                            x2: 356.6907775768535,
                            y2: 654.3851717902351,
                            x: 4.068716094032549,
                            y: 615.7323688969258,
                            width: 352.622061482821,
                            height: 38.652802893309286,
                        },
                        {
                            x1: 6.78119349005425,
                            y1: 650.994575045208,
                            x2: 356.0126582278481,
                            y2: 688.2911392405063,
                            x: 6.78119349005425,
                            y: 650.994575045208,
                            width: 349.23146473779383,
                            height: 37.29656419529829,
                        },
                        {
                            x1: 8.137432188065098,
                            y1: 685.5786618444846,
                            x2: 345.84086799276673,
                            y2: 722.1971066907776,
                            x: 8.137432188065098,
                            y: 685.5786618444846,
                            width: 337.70343580470166,
                            height: 36.61844484629296,
                        },
                    ],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 4,
                    text: "十个坠挂,一段话,陪伴我走到了今天",
                    cooridates: [],
                    paperIndex: 0,
                    isHighlight: false,
                    isEmpty: true,
                },
                {
                    index: 1,
                    text: "每个人在成长的道路上都会有陪伴，陪着你的，有可能是一个人，有可能是一件物品而陪伴我走到今天的却是一个挂坠",
                    cooridates: [],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: true,
                },
                {
                    index: 2,
                    text: "这个娃坠十分普通，透明的亚克力板上印着一个球衣一样的花纹，球衣正中写着24这个两位数，然而就是这个十分平常的挂坠却是我的心爱之物",
                    cooridates: [],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: true,
                },
                {
                    index: 3,
                    text: "这个挂坠是我的好朋友送给我的，他的成绩很好都总被老师骂,他们很有钱,他父母也是外地人，因工作娘因来到了这里，于是他就被带到我们班读书,我们认识不久就成为了好朋友，由于家离得近所以我们也一起上下学,一起当作业，就这样不知不觉来到了五年级，有一天他突然很不开心,我一问他原因才得知他父A0T我要把他带到处面的学校读书去了，我很不舍得他，可是时间却过得很快一眨眼就到了期来,在考完试回家的路上,我们两都低头不说话快到家时，他突然从包里拿貌出一个印着球衣的挂坠，说：“这个2.4号球衣是一位球蓝明星的，他是通过不断的努力获得了很多荣誉…你也加油…以后我们可以考连同一个学校，就又可以在一起了”",
                    cooridates: [
                        {
                            x1: 14.575971731448764,
                            y1: 0,
                            x2: 363.0742049469965,
                            y2: 33.78975265017668,
                            x: 14.575971731448764,
                            y: 728.3001808318264,
                            width: 348.4982332155477,
                            height: 33.78975265017668,
                        },
                        {
                            x1: 11.925795053003535,
                            y1: 29.151943462897528,
                            x2: 361.7491166077739,
                            y2: 66.91696113074205,
                            x: 11.925795053003535,
                            y: 757.452124294724,
                            width: 349.82332155477036,
                            height: 37.765017667844525,
                        },
                        {
                            x1: 13.25088339222615,
                            y1: 61.61660777385159,
                            x2: 360.42402826855124,
                            y2: 101.36925795053004,
                            x: 13.25088339222615,
                            y: 789.916788605678,
                            width: 347.17314487632507,
                            height: 39.75265017667845,
                        },
                        {
                            x1: 11.263250883392226,
                            y1: 96.06890459363959,
                            x2: 364.3992932862191,
                            y2: 135.15901060070672,
                            x: 11.263250883392226,
                            y: 824.369085425466,
                            width: 353.1360424028269,
                            height: 39.090106007067135,
                        },
                        {
                            x1: 14.575971731448764,
                            y1: 128.53356890459364,
                            x2: 365.0618374558304,
                            y2: 166.29858657243818,
                            x: 14.575971731448764,
                            y: 856.83374973642,
                            width: 350.48586572438165,
                            height: 37.765017667844546,
                        },
                        {
                            x1: 12.588339222614842,
                            y1: 160.9982332155477,
                            x2: 361.0865724381626,
                            y2: 200.08833922261485,
                            x: 12.588339222614842,
                            y: 889.2984140473741,
                            width: 348.49823321554777,
                            height: 39.090106007067135,
                        },
                        {
                            x1: 8.613074204946997,
                            y1: 195.4505300353357,
                            x2: 351.14840989399295,
                            y2: 233.21554770318022,
                            x: 8.613074204946997,
                            y: 923.7507108671621,
                            width: 342.53533568904595,
                            height: 37.76501766784452,
                        },
                        {
                            x1: 13.913427561837457,
                            y1: 227.25265017667846,
                            x2: 365.0618374558304,
                            y2: 266.3427561837456,
                            x: 13.913427561837457,
                            y: 955.5528310085049,
                            width: 351.14840989399295,
                            height: 39.09010600706716,
                        },
                        {
                            x1: 14.575971731448764,
                            y1: 259.0547703180212,
                            x2: 358.43639575971736,
                            y2: 298.1448763250884,
                            x: 14.575971731448764,
                            y: 987.3549511498477,
                            width: 343.8604240282686,
                            height: 39.09010600706716,
                        },
                        {
                            x1: 13.913427561837457,
                            y1: 290.1943462897527,
                            x2: 361.0865724381626,
                            y2: 333.25971731448766,
                            x: 13.913427561837457,
                            y: 1018.494527121579,
                            width: 347.1731448763251,
                            height: 43.065371024734986,
                        },
                        {
                            x1: 12.588339222614842,
                            y1: 324.64664310954066,
                            x2: 358.43639575971736,
                            y2: 363.7367491166078,
                            x: 12.588339222614842,
                            y: 1052.946823941367,
                            width: 345.84805653710254,
                            height: 39.09010600706716,
                        },
                        {
                            x1: 10.60070671378092,
                            y1: 357.773851590106,
                            x2: 357.1113074204947,
                            y2: 400.1766784452297,
                            x: 10.60070671378092,
                            y: 1086.0740324219323,
                            width: 346.5106007067138,
                            height: 42.40282685512369,
                        },
                        {
                            x1: 11.925795053003535,
                            y1: 392.226148409894,
                            x2: 355.7862190812721,
                            y2: 431.97879858657245,
                            x: 11.925795053003535,
                            y: 1120.5263292417203,
                            width: 343.8604240282686,
                            height: 39.75265017667846,
                        },
                        {
                            x1: 10.60070671378092,
                            y1: 427.34098939929333,
                            x2: 129.85865724381625,
                            y2: 458.48056537102474,
                            x: 10.60070671378092,
                            y: 1155.6411702311198,
                            width: 119.25795053003533,
                            height: 31.139575971731404,
                        },
                    ],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: false,
                },
                {
                    index: 4,
                    text: "十个坠挂,一段话,陪伴我走到了今天",
                    cooridates: [
                        {
                            x1: 56.31625441696114,
                            y1: 590.9893992932863,
                            x2: 358.43639575971736,
                            y2: 629.416961130742,
                            x: 56.31625441696114,
                            y: 1319.2895801251127,
                            width: 302.1201413427562,
                            height: 38.427561837455755,
                        },
                        {
                            x1: 7.95053003533569,
                            y1: 624.1166077738517,
                            x2: 169.6113074204947,
                            y2: 660.5565371024735,
                            x: 7.95053003533569,
                            y: 1352.416788605678,
                            width: 161.660777385159,
                            height: 36.439929328621815,
                        },
                    ],
                    paperIndex: 1,
                    isHighlight: false,
                    isEmpty: false,
                },
            ],
            corrections: [],
            dataURL: "",
            imgLoaded: false,
            searchPlusIcon,
        };
    },
    provide() {
        const info = Vue.observable({
            get markSelType() {
                return this._type;
            },
            set markSelType(v) {
                this._type = v;
            },
            get markSelIndex() {
                return this._index;
            },
            set markSelIndex(v) {
                this._index = v;
            },
            // 下面存内部字段，直接用属性存即可
            _type: "",
            _index: {
                wordIndex: -1,
                sentenceIndex: -1,
                paragraphIndex: 0,
                correctionIndex: 0,
            },
            changeMarkSelIndex: (type, index) => {
                // 更新 observable 对象上的字段
                info.markSelType = type;
                // 注意要用 Vue.set 或直接改对象属性，保证响应式
                info.markSelIndex = {
                    ...info.markSelIndex,
                    [`${type}Index`]: index,
                };
            },
        });

        return {
            markSelInfo: info,
        };
    },
    watch: {
        "config.viewType"(val) {
            const viewType = val === "runse" ? "comprehensive" : val;
            if (viewType === "wordsentence") {
                if (this.markData[0].selections.words.length === 0) {
                    this.markData[0].selections.words = [
                        {
                            index: 1,
                            text: "不知不觉",
                            cooridates: [
                                {
                                    x1: 240,
                                    y1: 1013,
                                    x2: 400,
                                    y2: 1064,
                                },
                            ],
                        },
                    ];
                    this.markData[1].selections.words = [
                        {
                            index: 1,
                            text: "不知不觉",
                            cooridates: [],
                        },
                    ];
                    this.markData[0].selections.sentences = [
                        {
                            index: 1,
                            text: "这个挂坠是我的好朋友送给我的",
                            cooridates: [
                                {
                                    x1: 91,
                                    y1: 606,
                                    x2: 536,
                                    y2: 663,
                                },
                                {
                                    x1: 6,
                                    y1: 657,
                                    x2: 125,
                                    y2: 711,
                                },
                            ],
                        },
                        {
                            index: 2,
                            text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时,便会想起他说的话,使又ASOO有了力气",
                            cooridates: [],
                        },
                        {
                            index: 3,
                            text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时",
                            cooridates: [],
                        },
                    ];
                    this.markData[1].selections.sentences = [
                        {
                            index: 1,
                            text: "这个挂坠是我的好朋友送给我的",
                            cooridates: [],
                        },
                        {
                            index: 2,
                            text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时,便会想起他说的话,使又ASOO有了力气",
                            cooridates: [
                                {
                                    x1: 96,
                                    y1: 689,
                                    x2: 537,
                                    y2: 749,
                                },
                                {
                                    x1: 22,
                                    y1: 742,
                                    x2: 534,
                                    y2: 797,
                                },
                                {
                                    x1: 13,
                                    y1: 791,
                                    x2: 538,
                                    y2: 850,
                                },
                                {
                                    x1: 12,
                                    y1: 839,
                                    x2: 419,
                                    y2: 901,
                                },
                            ],
                        },
                        {
                            index: 3,
                            text: "这个挂坠我一直珍藏至今他说的话成为了我学习的动力每当我要放弃时",
                            cooridates: [
                                {
                                    x1: 96,
                                    y1: 689,
                                    x2: 537,
                                    y2: 749,
                                },
                                {
                                    x1: 22,
                                    y1: 742,
                                    x2: 534,
                                    y2: 797,
                                },
                                {
                                    x1: 13,
                                    y1: 791,
                                    x2: 292,
                                    y2: 848,
                                },
                            ],
                        },
                    ];
                }
            } else if (viewType === "paragraph") {
                this.markData[0].selections.paragraphs = [
                    {
                        index: 1,
                        text: "每个人在成长的道路上都会有陪伴，陪着你的，有可能是一个人，有可能是一件物品而陪伴我走到今天的却是一个挂坠",
                        cooridates: [
                            {
                                x1: 97,
                                y1: 60,
                                x2: 540,
                                y2: 122,
                            },
                            {
                                x1: 18,
                                y1: 111,
                                x2: 533,
                                y2: 169,
                            },
                            {
                                x1: 16,
                                y1: 163,
                                x2: 535,
                                y2: 218,
                            },
                            {
                                x1: 16,
                                y1: 214,
                                x2: 529,
                                y2: 266,
                            },
                            {
                                x1: 9,
                                y1: 264,
                                x2: 83,
                                y2: 312,
                            },
                        ],
                    },
                    {
                        index: 2,
                        text: "这个娃坠十分普通，透明的亚克力板上印着一个球衣一样的花纹，球衣正中写着24这个两位数，然而就是这个十分平常的挂坠却是我的心爱之物",
                        cooridates: [
                            {
                                x1: 94,
                                y1: 309,
                                x2: 533,
                                y2: 366,
                            },
                            {
                                x1: 13,
                                y1: 360,
                                x2: 525,
                                y2: 419,
                            },
                            {
                                x1: 10,
                                y1: 412,
                                x2: 524,
                                y2: 465,
                            },
                            {
                                x1: 16,
                                y1: 460,
                                x2: 522,
                                y2: 516,
                            },
                            {
                                x1: 12,
                                y1: 510,
                                x2: 523,
                                y2: 568,
                            },
                            {
                                x1: 7,
                                y1: 564,
                                x2: 38,
                                y2: 611,
                            },
                        ],
                    },
                    {
                        index: 3,
                        text: "这个挂坠是我的好朋友送给我的，他的成绩很好都总被老师骂,他们很有钱,他父母也是外地人，因工作娘因来到了这里，于是他就被带到我们班读书,我们认识不久就成为了好朋友，由于家离得近所以我们也一起上下学,一起当作业，就这样不知不觉来到了五年级，有一天他突然很不开心,我一问他原因才得知他父A0T我要把他带到处面的学校读书去了，我很不舍得他，可是时间却过得很快一眨眼就到了期来,在考完试回家的路上,我们两都低头不说话快到家时，他突然从包里拿貌出一个印着球衣的挂坠，说：“这个2.4号球衣是一位球蓝明星的，他是通过不断的努力获得了很多荣誉…你也加油…以后我们可以考连同一个学校，就又可以在一起了”",
                        cooridates: [
                            {
                                x1: 91,
                                y1: 606,
                                x2: 536,
                                y2: 663,
                            },
                            {
                                x1: 6,
                                y1: 657,
                                x2: 535,
                                y2: 715,
                            },
                            {
                                x1: 8,
                                y1: 706,
                                x2: 527,
                                y2: 763,
                            },
                            {
                                x1: 3,
                                y1: 754,
                                x2: 526,
                                y2: 814,
                            },
                            {
                                x1: 3,
                                y1: 804,
                                x2: 521,
                                y2: 865,
                            },
                            {
                                x1: 0,
                                y1: 857,
                                x2: 525,
                                y2: 913,
                            },
                            {
                                x1: 6,
                                y1: 908,
                                x2: 526,
                                y2: 965,
                            },
                            {
                                x1: 10,
                                y1: 960,
                                x2: 525,
                                y2: 1015,
                            },
                            {
                                x1: 12,
                                y1: 1011,
                                x2: 510,
                                y2: 1065,
                            },
                        ],
                    },
                    {
                        index: 4,
                        text: "十个坠挂,一段话,陪伴我走到了今天",
                        cooridates: [],
                    },
                ];
                this.markData[1].selections.paragraphs = [
                    {
                        index: 1,
                        text: "每个人在成长的道路上都会有陪伴，陪着你的，有可能是一个人，有可能是一件物品而陪伴我走到今天的却是一个挂坠",
                        cooridates: [],
                    },
                    {
                        index: 2,
                        text: "这个娃坠十分普通，透明的亚克力板上印着一个球衣一样的花纹，球衣正中写着24这个两位数，然而就是这个十分平常的挂坠却是我的心爱之物",
                        cooridates: [],
                    },
                    {
                        index: 3,
                        text: "这个挂坠是我的好朋友送给我的，他的成绩很好都总被老师骂,他们很有钱,他父母也是外地人，因工作娘因来到了这里，于是他就被带到我们班读书,我们认识不久就成为了好朋友，由于家离得近所以我们也一起上下学,一起当作业，就这样不知不觉来到了五年级，有一天他突然很不开心,我一问他原因才得知他父A0T我要把他带到处面的学校读书去了，我很不舍得他，可是时间却过得很快一眨眼就到了期来,在考完试回家的路上,我们两都低头不说话快到家时，他突然从包里拿貌出一个印着球衣的挂坠，说：“这个2.4号球衣是一位球蓝明星的，他是通过不断的努力获得了很多荣誉…你也加油…以后我们可以考连同一个学校，就又可以在一起了”",
                        cooridates: [
                            {
                                x1: 22,
                                y1: 0,
                                x2: 548,
                                y2: 51,
                            },
                            {
                                x1: 18,
                                y1: 44,
                                x2: 546,
                                y2: 101,
                            },
                            {
                                x1: 20,
                                y1: 93,
                                x2: 544,
                                y2: 153,
                            },
                            {
                                x1: 17,
                                y1: 145,
                                x2: 550,
                                y2: 204,
                            },
                            {
                                x1: 22,
                                y1: 194,
                                x2: 551,
                                y2: 251,
                            },
                            {
                                x1: 19,
                                y1: 243,
                                x2: 545,
                                y2: 302,
                            },
                            {
                                x1: 13,
                                y1: 295,
                                x2: 530,
                                y2: 352,
                            },
                            {
                                x1: 21,
                                y1: 343,
                                x2: 551,
                                y2: 402,
                            },
                            {
                                x1: 22,
                                y1: 391,
                                x2: 541,
                                y2: 450,
                            },
                            {
                                x1: 21,
                                y1: 438,
                                x2: 545,
                                y2: 503,
                            },
                            {
                                x1: 19,
                                y1: 490,
                                x2: 541,
                                y2: 549,
                            },
                            {
                                x1: 16,
                                y1: 540,
                                x2: 539,
                                y2: 604,
                            },
                            {
                                x1: 18,
                                y1: 592,
                                x2: 537,
                                y2: 652,
                            },
                            {
                                x1: 16,
                                y1: 645,
                                x2: 196,
                                y2: 692,
                            },
                        ],
                    },
                    {
                        index: 4,
                        text: "十个坠挂,一段话,陪伴我走到了今天",
                        cooridates: [
                            {
                                x1: 85,
                                y1: 892,
                                x2: 541,
                                y2: 950,
                            },
                            {
                                x1: 12,
                                y1: 942,
                                x2: 256,
                                y2: 997,
                            },
                        ],
                    },
                ];
            } else if (viewType === "correction") {
                if (this.markData[0].selections.corrections.length === 0) {
                    this.markData.forEach((item) => {
                        item.selections.corrections = this.corrections;
                    });
                }
            }
        },
    },
    mounted() {},
    methods: {
        handleClick(tab) {
            const name = tab.name;
            this.config.viewType = name === "runse" ? "comprehensive" : name;
        },
        onMarkClick(type) {
            if (
                type === "word" ||
                (type === "sentence" && this.viewType !== "wordsentence")
            ) {
                this.viewType = "wordsentence";
            } else if (
                type === "correction" &&
                this.viewType !== "correction"
            ) {
                this.viewType = "correction";
            }
            this.handleClick({ name: this.viewType });
        },
        showImage() {
            const url = this.$refs.essayEvaluator.toDataURL();

            if (this.dataURL !== url) {
                this.imgLoaded = false;
                this.dataURL = url;
            } else {
                this.onImageLoad();
            }
        },
        onImageLoad() {
            if (!this.imgLoaded) {
                this.imgLoaded = true;
            }
            this.$refs.elImage.$el.querySelector("img").click();
        },
    },
    components: {
        EssayEvaluator,
        KonvaDemoChild,
    },
};
</script>
<style scoped>
.konva-demo {
    position: relative;
}
.search-plus {
    position: absolute;
    top: 450px;
    left: 400px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.image-box {
    position: absolute;
    top: 0;
    right: 9999px;
    border: 2px solid orange;
    padding: 10px;
}
</style>
